<template>
  <div>
    <!--  侧边栏  -->
    <div class="sidebar">
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">由我举报</span>
            </el-menu-item>
            <el-menu-item index="4" @click="tankTrack()">
              <i class="el-icon-setting"></i>
              <span slot="title">任务追踪</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <!--  内容    -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'Track',
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.getTankHistory()
  },

  methods: {
    //跳转任务追踪页面
    tankTrack(){
      this.$router.push(`/track/tack`)
    },

    // 获取任务进度
    async getTankHistory() {
      await this.$store.dispatch("task/getTankHistory");
      console.log(this.tankHistory)
      this.tableData = this.tankHistory
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    ...mapState("task",["tankHistory"])
  }

};
</script>

<style lang="less" scoped>

.sidebar {
  position: fixed;
  left: 0;
  top: 68.8px;
  width: 240px;

  .el-menu-vertical-demo {
    height: 100vh;
  }
}

.main-content {
  width: 1100px;
  margin-left: 300px;
  margin-top: 20px;
  padding: 20px;

  border-radius: 4px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  background-color: #fff;
}
</style>